<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form labelWidth="150px">
        <el-form-item label="牌照" class="is-required">
          <selectcarnumber @getpersonid2="getpersonid2" :itempersonid="addfuel.carno" :itemtype="2"></selectcarnumber>
          <div class="el-form-item__error" v-if="!$v.addfuel.carid.required">
            请选择牌照
          </div>
        </el-form-item>
        <el-form-item label="加油日期" class="is-required">
          <el-date-picker
            v-model="addfuel.olitime"
            type="date"
            valueFormat="yyyy-MM-dd"
            style="width:100%"
            placeholder="选择日期"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.addfuel.olitime.required">
            请选择加油日期
          </div>
        </el-form-item>
        <el-form-item label="加油量（L）" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="addfuel.oilsum"></el-input>
          <div class="el-form-item__error" v-if="!$v.addfuel.oilsum.required">
            请输入加油量
          </div>
        </el-form-item>
        <el-form-item label="费用(元)" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="addfuel.oilamount"></el-input>
          <div class="el-form-item__error" v-if="!$v.addfuel.oilamount.required">
            请输入费用
          </div>
          <div class="el-form-item__error" v-if="!$v.addfuel.oilamount.money">
            费用格式有误
          </div>
        </el-form-item>
        <el-form-item label="本次公里数" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="addfuel.currentmileage"></el-input>
          <div class="el-form-item__error" v-if="!$v.addfuel.currentmileage.required">
            请输入本次公里数
          </div>
        </el-form-item>
        <el-form-item>
          <div>&nbsp;</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="goaddfuel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import selectcarnumber from '~/components/common/selectcarnumber.vue';
import { required } from 'vuelidate/lib/validators';
import { regex } from 'vuelidate/lib/validators/common.js';

const money = regex('money', /^\d{1,8}(\.\d{1,2})?$/);

export default {
  validations: {
    addfuel: {
      carid: {
        required,
      },
      olitime: {
        required,
      },
      oilsum: {
        required,
      },
      oilamount: {
        required,
        money,
      },
      currentmileage: {
        required,
      },
    },
  },
  components: {
    selectcarnumber,
  },
  props: {
    chousebtn: Number,
    chouseval: Array,
  },
  data() {
    return {
      title: '添加加油信息',
      dialogVisible: true,
      ts: this.newStore(),
      // 添加的信息
      addfuel: {
        carid: '',
        olitime: '',
        oilsum: 0,
        oilamount: '',
        currentmileage: 0,
      },
      addfueldate: {},
    };
  },
  created() {
    this.getitemval();
    if (this.chousebtn == 2) {
      this.title = '修改加油信息';
    }
  },
  methods: {
    // 编辑渲染信息
    getitemval() {
      if (this.chouseval.length > 0 && this.chousebtn == '2') {
        let b = {};
        this.chouseval.forEach((item) => {
          b = item;
        });
        this.addfuel = b.hash;
        console.log(this.addfuel, "2222");
      }
    },
    // 获取车辆编号
    getpersonid2(val) {
      console.log(val,'val');

      this.addfuel.carid = val.id2;
      this.addfuel.carno = val.id;
    },
    // 添加/修改加油信息
    goaddfuel() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加加油信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle: '0E56125B90D2898A9F595BEEBE51B7F2A32DB82B39049979',
            carid: this.addfuel.carid,
            olitime: this.addfuel.olitime,
            oilsum: this.addfuel.oilsum,
            oilamount: this.addfuel.oilamount,
            currentmileage: this.addfuel.currentmileage,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.dialogVisible = false;
              this.$emit('update:addfuel', this.addfuel);
            }
          });
        });
      } else if (this.chousebtn == 2) {
        this.$confirm('是否修改加油信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle:
              '0E56125B90D2898A7B4BD3DD83448657F0B6E15418851BA7BFF0B9210751F692',
            carid: this.addfuel.carid,
            caroilid: this.addfuel.caroilid,
            olitime: this.addfuel.olitime,
            oilsum: this.addfuel.oilsum,
            oilamount: this.addfuel.oilamount,
            currentmileage: this.addfuel.currentmileage,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible = false;
              this.$emit('update:addfuel', this.addfuel);
            }
          });
        });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
.statusspan {
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>
